// 第三方库
import { useEffect } from 'react';
import { Route, Link, useLocation, useHistory } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
// 导入布局
import { Layout, Menu, Popconfirm } from 'antd';
import {
  HomeOutlined,
  DiffOutlined,
  EditOutlined,
  LogoutOutlined,
} from '@ant-design/icons';

// 导入自定义组件
import { Board } from './Board/Board';
import { Article } from './Article/Article';
import { Publish } from './Publish/Publish';

// 导入action
import { getUserInfo } from '@/store/actions/user';
import { logout } from '@/store/actions/login';

// 导入样式
// import './Home.scss';
// 按照模块化方式导入
import styles from './Home.module.scss';

// 布局中包含 Header
const { Header, Sider } = Layout;

export const Home = () => {
  // 定义 dispatch
  const dispatch = useDispatch();
  // 获取当前页面浏览器地址栏的信息
  const location = useLocation();
  // 获取操作地址栏对象
  const history = useHistory();

  // 当前路由地址
  const selectedKey = location.pathname;
  // 用户信息
  const user = useSelector((state) => state.user);

  // 路由选中计算
  const selected = (selectedKey) => {
    if (selectedKey.startsWith('/home/publish')) {
      return '/home/publish';
    }
    if (selectedKey.startsWith('/home/article')) {
      return '/home/article';
    }
    if (selectedKey.startsWith('/home')) {
      return '/home';
    }
    return '/home';
  };

  // 进入Home页面后发起获取用户信息请求，action
  useEffect(() => {
    dispatch(getUserInfo());
  }, [dispatch]);

  // 事件
  const handleLogout = () => {
    console.log('fa action');
    dispatch(logout());
    // 回到登录页
    history.push('/login');
  };

  return (
    <div className={styles.root}>
      <Layout style={{ height: '100%' }}>
        <Header className="header">
          <div className="logo" style={{ color: 'white' }}></div>
          <div className="user-info">
            <div className="user-name">{user.name}</div>
            <Popconfirm
              title="确认退出？"
              okText="退出"
              cancelText="取消"
              onConfirm={handleLogout}
              placement="bottom"
            >
              <LogoutOutlined /> 退出
            </Popconfirm>
          </div>
        </Header>
        <Layout>
          <Sider>
            {/* <Menu defaultSelectedKeys={['1']} theme={'dark'}>
            <Menu.Item key="1" icon={<HomeOutlined />}>
              数据管理
            </Menu.Item>
            <Menu.Item key="2" icon={<DiffOutlined />}>
              内容管理
            </Menu.Item>
            <Menu.Item key="3" icon={<EditOutlined />}>
              发布文章
            </Menu.Item>
          </Menu> */}
            {/* 新的写法 */}
            <Menu
              theme="dark"
              // mode="inline"
              // defaultSelectedKeys={['1']}
              // selectedKeys={[
              //   ((selectedKey) => {
              //     return selectedKey;
              //   })(selectedKey),
              // ]}
              // 上面的写法和下面的写法等价
              selectedKeys={[selected(selectedKey)]}
              items={[
                {
                  key: '/home',
                  icon: <HomeOutlined />,
                  label: <Link to={'/home'}>数据管理</Link>,
                },
                {
                  key: '/home/article',
                  icon: <DiffOutlined />,
                  label: <Link to={'/home/article'}>内容管理</Link>,
                },
                {
                  key: '/home/publish',
                  icon: <EditOutlined />,
                  label: <Link to={'/home/publish'}>发布文章</Link>,
                },
              ]}
            />
          </Sider>

          <Layout style={{ padding: '24px', overflowY: 'auto' }}>
            <Route exact path={'/home'} component={Board}></Route>
            <Route path={'/home/article'} component={Article}></Route>
            {/* id 是一个变量，配置成可选路由的方式是加一个问号 */}
            <Route path={'/home/publish/:id?'} component={Publish}></Route>
          </Layout>
        </Layout>
      </Layout>
    </div>
  );
};
